<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>省市县三级联动案例</title>
	<link rel="stylesheet" href="./css/index.css" />
</head>

<body>
	<div class="list-box">
		<div class="item">
			<span>省份：</span>
			<select id="province">
				<option value="">请选择省份</option>
			</select>
		</div>
		<div class="item">
			<span>城市：</span>
			<select id="city">
				<option value="">请选择城市</option>
			</select>
		</div>
		<div class="item">
			<span>区县：</span>
			<select id="county">
				<option value="">请选择区县</option>
			</select>
		</div>
	</div>
</body>
<script src="./lib/axios.js"></script>
<script>
	//1.封装获取元素的函数
	//简化写法  函数表达式+箭头函数   
	const qs = ele => document.querySelector(ele)

	//2.配置根路径
	axios.defaults.baseURL = 'http://124.223.14.236:3001/api'

	//3.渲染省市区数据
	async function render() {
		//3-1.获取省数据
		const {
			data: {
				data: provinceData
			}
		} = await axios.get('/city/province')
		//console.log(provinceData);
		//3-2.将数据渲染到页面中
		const provinceStr = provinceData.map(item => `<option value="${item.province}">${item.name}</option>`).join('')
		qs('#province').innerHTML = '<option value="">请选择区县</option>' + provinceStr
		//3-3.默认显示安徽省
		qs('#province').value = '34'

		//.4.获取市数据
		const {
			data: {
				data: cityData
			}
		} = await axios({
			url: '/city/city',
			params: {
				provinceCode: '34'
			}
		})
		//console.log(cityData);
		const cityStr = cityData.map(item => ` <option value="${item.city}">${item.name}</option>`).join('')
		qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr
		qs('#city').value = '01'

		//.5.获取区数据
		const {
			data: {
				data: areaData
			}
		} = await axios.get('/city/area', {
			params: {
				provinceCode: '34',
				cityCode: '01'
			}
		})
		//console.log(areaData);
		const areaStr = areaData.map(item => `<option value="${item.area}">${item.name}</option>`).join('')
		qs('#county').innerHTML = '<option value="">请选择城市</option>' + areaStr
		qs('#county').value = '02'
	}
	render()

	//4.监听省数据的变化change,  影响市数据对应发生变化
	qs('#province').addEventListener('change', async function () {
		console.log(this.value);

		//发起请求
		const {
			data: {
				data: cityData
			}
		} = await axios.get('/city/city', {
			params: {
				provinceCode: this.value
			}
		})
		//console.log(cityData);
		const cityStr = cityData.map(item => {
			return `
				<option value="${item.city}">${item.name}</option>
			`
		}).join('')
		qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr
		//省市变化，区也要相对发生变化
		qs('#county').innerHTML = '<option value="">请选择区县</option>'
	})

	//5.监听市数据的变化 chnage，影响区的数据
	qs('#city').addEventListener('change', async function () {
		//发起请求
		const {
			data: {
				data: countyData
			}
		} = await axios.get('/city/area', {
			params: {
				provinceCode: qs('#province').value,
				cityCode: qs('#city').value
			}
		})
		console.log(countyData);
		const countyStr = countyData.map(item => {
			return `
			<option value="${item.area}">${item.name}</option>
			`
		}).join('')
		qs('#county').innerHTML = '<option value="">请选择区县</option>' + countyStr
	})
</script>

</html>